<template>
	<view class="body">
		<view class="msgbox">
			<image src="../../static/information/haqian.jpg" mode=""></image>
			<view class="msgbox-right">
				<view class="msgbox-right-top">
					<view class="username">
						{{user.name}}
					</view>
					<view class="date">
						{{user.noticeDate}}
					</view>
				</view>
				<view class="noticeMsg">
					回复我：{{user.content}}
				</view>
				<view class="myRecommend">
					我的评论：{{user.recommend}}
				</view>
			</view>
		</view>
		<hr>
		<view class="msgbox">
			<image src="../../static/information/haqian.jpg" mode=""></image>
			<view class="msgbox-right">
				<view class="msgbox-right-top">
					<view class="username">
						{{user.name}}
					</view>
					<view class="date">
						{{user.noticeDate}}
					</view>
				</view>
				<view class="noticeMsg">
					回复我：{{user.content}}
				</view>
				<view class="myRecommend">
					我的评论：{{user.recommend}}
				</view>
			</view>
		</view>
		<hr>
		<view class="msgbox">
			<image src="../../static/information/haqian.jpg" mode=""></image>
			<view class="msgbox-right">
				<view class="msgbox-right-top">
					<view class="username">
						{{user.name}}
					</view>
					<view class="date">
						{{user.noticeDate}}
					</view>
				</view>
				<view class="noticeMsg">
					回复我：{{user.content}}
				</view>
				<view class="myRecommend">
					我的评论：{{user.recommend}}
				</view>
			</view>
		</view>
		<hr>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				user:{
					name:'昵称已被占用',
					noticeDate:'2022.7.12',
					content:'66666666',
					recommend:'四级不是有手就行（手动狗头四级不是有手就行四级不是有手就行四级不是有手就行四级不是有手就行四级不是有手就行四级不是有手就行四级不是有手就行四级不是有手就行四级不是有手就行四级不是有手就行'
				}
			}
		}
	}
</script>

<style>
	.msgbox{
		display: flex;
		margin-top: 15px;
		margin-bottom: 15px;
	}
	image{
		height: 50px;
		width: 50px;
		border: solid 0.5rpx whitesmoke;
		border-radius: 50%;
		border: 2rpx solid rgb(150, 150, 150);
		margin-left: 15px;
		margin-right: 15px;
	}
	.msgbox-right-top{
		display: flex;
		/* justify-content: space-between; */
		/* border: 1px solid black; */
	}
	.username{
		width: 100px;
		font-size: 16px;
		font-weight: 500;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color:#98DCFF;
	}
	.date{
		font-size: 15px;
		/* margin-left: 10px; */
		color:#BBBBBB;
		position: absolute;
		right: 5%;
	}
	.noticeMsg{
		margin-top:7px;
	}
	.myRecommend{
		border: 1px solid #EDEFF4;
		border-radius: 8px;
		background-color: #EDEFF4;
		box-sizing: border-box;
		padding: 4px;
		line-height: 22px;
		width: 250px;
		font-size: 14px;
		font-weight: 500;
		/* 溢出省略号，最多显示5行内容 */
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 5;
	}
	hr{
		background-color:#EDEFF4;
		height: 1px;
		border:none;
	}
</style>